<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
    <style>
        .base1 {
            font-size: 30px;
        }

        .base2 {
            color: pink;
        }

        img {
            width: 200px;
        }
    </style>
</head>
<body>

<!--
  {{}}  ：  一般用于标签内容的填充，不要使用在标签属性值的动态操作
  v-bind：   实现标签属性的动态操作
     v-bind:class="c1"   标签属性一旦被v-bind:修饰则其值不在以字符串进行解析
-->
<div id="app">
    <p v-bind:class="c1">{{ info }}</p>
    <p v-bind:style="c1">{{ info }}</p>
    <hr>
    <p :class="c2">{{ info }}</p>
    <hr>
    <p :class="c3">{{ info }}</p>

    <!--    <img v-bind:src="img"></img>-->
    <!--    <img :src="img"></img>-->
    <button @click="changeSize">改变文字大小</button>
    <button @click="changeColor">改变文字颜色</button>
    <button @click="changeCss">改变样式</button>
    <button @click="changeImg">改变图片</button>
</div>


<script>
    let vm = new Vue({
        el: '#app',
        data: {
            info: "vue 操作 css样式",
            c1: '',
            c2: ['base1'],
            c3: {
                base1: false,
                base2: false
            },
            img: '../imgs/1.png'
        },
        methods: {
            changeSize() {
                this.c1 = 'base1'
            },
            changeColor() {
                this.c1 = 'base2'
            },
            changeImg() {
                this.img = '../imgs/2.png'
            },
            changeCss() {
                this.c2.push("base2")
                this.c3.base1 = true
                this.c3.base2 = true
            }
        }
    })
</script>
</body>
</html>